/*
 * @Author: xiehangyun 
 * @Date: 2025-05-10 18:26:16 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-11-11 17:30:19
 */


import utilsStore from "@/utils/utilsStore";
import { ArrowLeft } from '@nutui/icons-react-taro';
import { Image, Text, View } from '@tarojs/components';
import Taro from "@tarojs/taro";
import { ReactNode } from "react";
import smallLogoPNG from "src/static/smallLogo.png";
import styles from "./customHeader.module.less";

import clsx from 'clsx';
import { observer } from "mobx-react-lite";

interface Iprops {
    children?: ReactNode;
    title?: string;
    showBack?: boolean;
    backIcon?: ReactNode;
    onBack?: () => void;
}

// 自定义头部
const CustomHeader = observer((props: Iprops) => {

    //返回路由
    const goBack = (e) => {
        e.stopPropagation();
        e.preventDefault();

        if (props.onBack) {
            props.onBack();
            return;
        }
        Taro.navigateBack({
            fail: (_res: TaroGeneral.CallbackResult) => {
                Taro.switchTab({ url: '/pages/Index/Index' });
            }
        });
    };



    return (
        <View
            className={clsx(styles.customHeader, "customHeader")}
            style={{
                // paddingTop: utilsStore.safeAreaTop,
                paddingTop: 20,
                // height: utilsStore.titleTop,
                // height: utilsStore.titleTop,
            }}
        >
            <View
                className={styles.navBar}
            // style={{
            //     height: utilsStore.titleTop - utilsStore.safeAreaTop,
            //     lineHeight: `${utilsStore.titleTop - utilsStore.safeAreaTop}px`,
            // }}
            >
                {
                    props.showBack && (
                        <View className={styles.left} onClick={goBack} >
                            {
                                props.backIcon ||
                                <View className={styles.back}  >
                                    <ArrowLeft />
                                </View>
                            }
                        </View>
                    )
                }
                <View className={styles.titleContainer}>
                    {/* 
                    <Image
                        className={styles.icon}
                        src={smallLogoPNG}
                    /> 
                    */}
                    <Text className={styles.title}>
                        {props.title || '优T定制'}
                    </Text>
                </View>
            </View>
            <div className={styles.instructionText}>选择设计模版，替换文本图片，实时预览效果</div>
            <View className={styles.footer} >
                {props.children}
            </View>
        </View>
    );
});

export default CustomHeader;